<template>
	<view class="subject-all-container">

		<!-- 搜索框 -->
		<view class="search-box">
			<view class="search-input">
				<view class="search-icon">🔍</view>
				<text class="search-placeholder">搜索课程等内容</text>
			</view>
		</view>

		<!-- 主内容区 -->
		<view class="main-content">
			<!-- 左侧分类导航 -->
			<view class="category-nav">
				<view v-for="(category, index) in categories" :key="index"
					:class="['category-item', currentCategory === index ? 'active' : '']" @click="switchCategory(index)">
					<text>{{ category.name }}</text>
				</view>
			</view>

			<!-- 右侧内容区 -->
			<view class="category-content">
				<!-- 当前分类标题 -->
				<view class="content-title">
					<text>{{ categories[currentCategory].name }}</text>
				</view>

				<!-- 学龄阶段标题 (如果有) -->
				<view v-if="categories[currentCategory].stages && categories[currentCategory].stages.length > 0"
					class="stage-title">
					<text>学龄阶段</text>
				</view>

				<!-- 学龄阶段图标 -->
				<view v-if="categories[currentCategory].stages && categories[currentCategory].stages.length > 0"
					class="subject-grid">
					<view v-for="(subject, idx) in categories[currentCategory].stages" :key="'stage-' + idx" class="subject-item">
						<image :src="subject.icon" mode="aspectFit" class="subject-icon"></image>
						<text class="subject-name">{{ subject.name }}</text>
					</view>
				</view>

				<!-- 小学阶段标题 (如果有) -->
				<view v-if="categories[currentCategory].elementary && categories[currentCategory].elementary.length > 0"
					class="stage-title">
					<text>小学阶段</text>
				</view>

				<!-- 小学阶段图标 -->
				<view v-if="categories[currentCategory].elementary && categories[currentCategory].elementary.length > 0"
					class="subject-grid">
					<view v-for="(subject, idx) in categories[currentCategory].elementary" :key="'elem-' + idx"
						class="subject-item">
						<image :src="subject.icon" mode="aspectFit" class="subject-icon"></image>
						<text class="subject-name">{{ subject.name }}</text>
					</view>
				</view>

				<!-- 初中高中标题 (如果有) -->
				<view v-if="categories[currentCategory].secondary && categories[currentCategory].secondary.length > 0"
					class="stage-title">
					<text>初中高中</text>
				</view>

				<!-- 初中高中图标 -->
				<view v-if="categories[currentCategory].secondary && categories[currentCategory].secondary.length > 0"
					class="subject-grid">
					<view v-for="(subject, idx) in categories[currentCategory].secondary" :key="'sec-' + idx"
						class="subject-item">
						<image :src="subject.icon" mode="aspectFit" class="subject-icon"></image>
						<text class="subject-name">{{ subject.name }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

// 当前选中的分类索引
const currentCategory = ref(1); // 默认选中学前小学

// 切换分类
const switchCategory = (index) => {
	currentCategory.value = index;
};

// 分类数据
const categories = ref([
	{
		name: '全部科目',
		stages: [],
		elementary: [],
		secondary: []
	},
	{
		name: '学前小学',
		stages: [
			{ name: '学龄', icon: '/static/subject/41.png' },
			{ name: '亲子', icon: '/static/subject/44.png' },
			{ name: '益智', icon: '/static/subject/45.png' },
			{ name: '手工', icon: '/static/subject/46.png' },
			{ name: '启蒙', icon: '/static/subject/47.png' },
			{ name: '创意', icon: '/static/subject/48.png' },
			{ name: '幼儿阅读', icon: '/static/subject/49.png' },
		],
		elementary: [
			{ name: '全科', icon: '/static/subject/50.png' },
			{ name: '奥数', icon: '/static/subject/51.png' },
			{ name: '语文', icon: '/static/subject/52.png' },
			{ name: '英语', icon: '/static/subject/55.png' },
			{ name: '数学', icon: '/static/subject/56.png' },
			{ name: '作文', icon: '/static/subject/57.png' },
			{ name: '小学阅读', icon: '/static/subject/58.png' },
		],
		secondary: []
	},
	{
		name: '初中高中',
		stages: [],
		elementary: [],
		secondary: [
			{ name: '物理', icon: '/static/subject/60.png' },
			{ name: '数学', icon: '/static/subject/59.png' },
			{ name: '化学', icon: '/static/subject/61.png' },
			{ name: '奥数', icon: '/static/subject/62.png' },
			{ name: '英语', icon: '/static/subject/63.png' },
			{ name: '语文', icon: '/static/subject/64.png' },
			{ name: '生物', icon: '/static/subject/65.png' },
			{ name: '历史', icon: '/static/subject/66.png' },
			{ name: '政治', icon: '/static/subject/67.png' },
			{ name: '美术', icon: '/static/subject/68.png' },
			{ name: '音乐', icon: '/static/subject/69.png' },
			{ name: '国学', icon: '/static/subject/70.png' },
			{ name: '棋牌', icon: '/static/subject/71.png' },
			{ name: '体育', icon: '/static/subject/72.png' },
			{ name: '雕塑', icon: '/static/subject/73.png' },
			{ name: '艺术', icon: '/static/subject/74.png' },
			{ name: '计算机', icon: '/static/subject/75.png' },
			{ name: '小语种', icon: '/static/subject/76.png' },
			{ name: '心理', icon: '/static/subject/77.png' },
		]
	},
	{
		name: '大学教育',
		stages: [],
		elementary: [],
		secondary: []
	},
	{
		name: '考试考研',
		stages: [],
		elementary: [],
		secondary: []
	},
	{
		name: '外语培训',
		stages: [],
		elementary: [],
		secondary: []
	},
	{
		name: '艺术哲学',
		stages: [],
		elementary: [],
		secondary: []
	},
	{
		name: '出国留学',
		stages: [],
		elementary: [],
		secondary: []
	},
	{
		name: '职业技能',
		stages: [],
		elementary: [],
		secondary: []
	},
	{
		name: '生活兴趣',
		stages: [],
		elementary: [],
		secondary: []
	}
]);
</script>

<style scoped lang="scss">
.subject-all-container {
	background-color: #e6f2f7;
	min-height: 100vh;
	position: relative;
}



/* 搜索框 */
.search-box {
	padding: 0 30rpx 20rpx;
}

.search-input {
	background-color: #ffffff;
	border-radius: 40rpx;
	padding: 15rpx 30rpx;
	display: flex;
	align-items: center;
	color: #999;
	height: 70rpx;
}

.search-icon {
	margin-right: 10rpx;
	font-size: 28rpx;
	color: #999;
	display: flex;
	align-items: center;
}

.search-placeholder {
	font-size: 28rpx;
	color: #999;
}

/* 主内容区 */
.main-content {
	display: flex;
	height: calc(100vh - 200rpx);
}

/* 左侧分类导航 */
.category-nav {
	width: 140rpx;
	background-color: #e6f2f7;
	padding: 0;
	overflow-y: auto;
}

.category-item {
	padding: 30rpx 0;
	text-align: center;
	font-size: 26rpx;
	color: #333;
	position: relative;
	line-height: 1.2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 80rpx;
	box-sizing: border-box;
	word-break: break-all;
	word-wrap: break-word;
}

.category-item.active {
	background-color: #ffffff;
	color: #0099ff;
	font-weight: bold;
}

.category-item.active::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 6rpx;
	height: 40rpx;
	background-color: #0099ff;
}

/* 右侧内容区 */
.category-content {
	flex: 1;
	background-color: #ffffff;
	padding: 30rpx 20rpx;
	overflow-y: auto;
	border-top-left-radius: 30rpx;
}

.content-title {
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 20rpx;
	color: #0099ff;
	padding-left: 10rpx;
}

.stage-title {
	font-size: 28rpx;
	color: #666;
	margin: 20rpx 0 15rpx;
	padding-left: 10rpx;
}

/* 科目网格 */
.subject-grid {
	display: flex;
	flex-wrap: wrap;
	padding: 0 10rpx;
}

.subject-item {
	width: 25%;
	text-align: center;
	margin-bottom: 30rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.subject-icon {
	width: 50rpx;
	height: 50rpx;
	margin-bottom: 10rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.subject-name {
	font-size: 22rpx;
	color: #333;
	line-height: 1.2;
	width: 100%;
	text-align: center;
}
</style>
